<template>
    <div class="ml-16px mr-16px content-container">
        <div class="pl-26px pt-26px pr-26px pb-16px">
            <IntroList :tableData="state.tableData" :page="state.page" @update:data="handleUpdateData" />
        </div>
    </div>
</template>

<script setup lang="ts">
import IntroList from './components/IntroList.vue'
import { getDistillationIntroApi } from '@/api/geo'
import { IDistQuestionItem } from '@/api/geo/types'
import { useHead } from '@vueuse/head'

const state = reactive({
    tableData: <IDistQuestionItem[]>[],
    page: {
        total: 0,
        curPage: 1,
        limit: 20,
        pageSizes: 20,
    },
    isLoading: true
})

function handleUpdateData(value: any) {
    state.page.curPage = value.curPage
    state.page.pageSizes = value.pageSizes
    state.page.limit = value.limit
    getDistillationIntro()
}

async function getDistillationIntro() {
    const res: ResType = await getDistillationIntroApi({
        pn: state.page.curPage,
        pagesize: state.page.pageSizes,
    })
    if (res.code === 200) {
        state.tableData = res.data
        state.page.curPage = res.page as number
        state.page.pageSizes = res.pagesize as number
        state.page.total = res.count
    }
}

useHead({
    title: 'GEO：引擎之上，生成万象 - 兴旺宝',
})

onMounted(() => {
    getDistillationIntro()
})
</script>
<style lang="scss" scoped></style>